<template>
  <div class="page-container">
    <h2 class="page-title">帮助中心</h2>
    <div class="grid">
      <el-card class="card" shadow="hover">
        <div class="name">支付相关</div>
        <div class="desc">支付方式、支付失败</div>
        <el-button size="small">查看</el-button>
      </el-card>
      <el-card class="card" shadow="hover">
        <div class="name">配送与物流</div>
        <div class="desc">发货、时效、签收</div>
        <el-button size="small">查看</el-button>
      </el-card>
      <el-card class="card" shadow="hover">
        <div class="name">发票与保修</div>
        <div class="desc">开票、保修说明</div>
        <el-button size="small">查看</el-button>
      </el-card>
    </div>
  </div>
</template>
<script setup>
</script>
<style scoped>
.page-container { max-width: 1000px; margin: 0 auto; padding: var(--spacing-xl); }
.page-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-lg); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--spacing-lg); }
.card { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.name { font-weight: var(--font-weight-medium); }
.desc { color: var(--text-secondary); }
</style>